<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import {useTurnStore} from "@/stores/turn.ts";
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'; // 直接导入 JSON 文件

const chartDom = ref(null);
const turnStore = useTurnStore();

onMounted(() => {
  const chart = echarts.init(chartDom.value);

  // 直接使用 geoJson 数据，不需要等待 axios 请求
  echarts.registerMap('china', china);

  const option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '13%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item' // 鼠标悬浮时显示提示信息
    },
    visualMap: {
        min: 0,
        max: 4000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#e0ffff', '#02264a']
        }
    },
    series: [{
      type: 'map',
      map: 'china',
      zoom: 1,
      layoutCenter: ['50%', '60%'],
      layoutSize: '95%',
      label: {
                show: true // 显示地图区域名称
      },
      data: [
        { name: '北京', value: 4000 },
        { name: '上海', value: 130 },
        { name: '广东', value: 150 },
        { name: '江苏', value: 110 },
        { name: '浙江', value: 100 },
        { name: '山东', value: 90 },
        { name: '河南', value: 80 },
        { name: '四川', value: 70 },
        { name: '湖北', value: 60 },
        { name: '湖南', value: 50 },
        { name: '河北', value: 40 },
        { name: '安徽', value: 30 },
        { name: '福建', value: 20 },
        { name: '陕西', value: 10 },
        { name: '江西', value: 15 },
        { name: '辽宁', value: 25 },
        { name: '云南', value: 35 },
        { name: '广西', value: 45 },
        { name: '山西', value: 55 },
        { name: '黑龙江', value: 65 },
        { name: '重庆', value: 3000 },
        { name: '吉林', value: 85 },
        { name: '贵州', value: 95 },
        { name: '天津', value: 105 },
        { name: '甘肃', value: 115 },
        { name: '海南', value: 125 },
        { name: '宁夏', value: 135 },
        { name: '青海', value: 145 },
        { name: '新疆', value: 155 },
        { name: '西藏', value: 165 }
      ],
      itemStyle: {
        areaColor: '#f0f9ff',
        borderColor: 'rgba(24,144,255,0.4)',
        borderWidth: 1.5,
        shadowColor: 'rgba(0,0,0,0.1)',
        shadowBlur: 2,
        shadowOffsetY: 2
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgba(64,169,255,0.4)',
          borderColor: 'rgba(255,255,255,0.8)',
          borderWidth: 2
        }
      }
    }]
  };

  chart.setOption(option);
  window.addEventListener('resize', function () {
      chart.resize();
  });
  chart.on('click', function (params) {
      turnStore.provinceList.push(params.name);
  })
});
</script>

<template>
    <div class="chart-container">
      <div ref="chartDom" class="chart"></div>
    </div>
</template>

<style lang="scss">
.chart-container{
  width: 100%;
  height: 500px;
  .chart{
    width: 95%;
    height: 90%;
    margin-left: 20px;
  }
}
</style>
